@charset "UTF-8";

@function vw($vw){
    @return $vw/750*100+vw
}
span,p{
    font-weight: bold;
}
html,
body{
    user-select: none;
    background-image: url(../img/bg.png);
    background-size: cover;
    background-repeat: no-repeat; 
    background-attachment: fixed; 
    position: relative;
    z-index: -999;

     main{
        width: vw(590);
        background-color: rgba(255, 254, 254, 0.231);
        box-shadow: 0 vw(4) vw(13) vw(5) rgba(0, 0, 0, 0.3);
        border-radius: vw(10);
        margin: 0 auto;
        box-sizing: border-box;
    }

    .wrapper{
        width: 100vw;
        height: 100vh;
        padding-top: vw(140);
        box-sizing: border-box;

        .back{
            width: vw(60);
            text-align: center;
            font-size: vw(35);
            line-height: vw(40);
            background-color: rgba(255, 254, 254, 0.231);
            box-shadow: 0 vw(4) vw(13) vw(5) rgba(0, 0, 0, 0.3);

            border-radius: 30%;
            position: absolute;
            top: vw(60);
            left: vw(50);
        box-sizing: border-box;

        }

        .sea{
            pointer-events: none;
            width: vw(750);
            height: 100vh;
            border-radius: vw(5);
            box-shadow: 0 vw(2) vw(30) rgba(0,0,0,0.2);
            position: absolute;
            top: 0;
            z-index: -99;
            overflow: hidden;

            .wave{
                width: vw(1050);
                height: vw(1050);
                position: absolute;
                top: vw(-550);
                left: vw(-150);
                filter: opacity(0.4);
                border-radius: 43%;
                animation: drift 5s linear infinite;
                transform-origin:50% 40%;

                &:nth-of-type(1){
                    animation-duration: 5s;
                    background-color: rgb(0, 200, 255);
                }
                &:nth-of-type(2){
                    animation-duration: 7s;
                    background-color: rgb(23, 253, 200);
                }
                &:nth-of-type(3){
                    animation-duration: 9s;
                    background-color: red;
                    filter: opacity(0.2);
                }
            }
            @keyframes drift {
                from{
                    transform: rotate(360deg);
                }
            }
    
        }



         footer{
             width: vw(750);
             display: flex;
             justify-content: space-around;
             background-color: cadetblue;
             position: absolute;
             bottom: 0;
             
            a{
                line-height: vw(70);
                font-size: vw(35);
                // border-radius:50%;
                // background-color: cadetblue;
                color: white;
            }
            i{
                // text-align: center;
                line-height: vw(50);
                font-size: vw(30);
                // color: rgb(255, 255, 255);
            }
         }
    }
}